<template lang="html">
  <div class="">
     <Headbar :title='title'></Headbar>
     <!-- 顶部图片 -->
     <div class="choice_top">
        <img src="http://appnh5.caissa.com.cn/images/custom_banner.png">
     </div>

     <div class="plan_time">
        <p>出发时间</p>
        <Row>
           <Col span="12">
           <DatePicker type="date" placeholder="2017年11月13日" style="width: 17rem"></DatePicker>
           </Col>
       </Row>
     </div>

     <div class="plan_time">
        <p>出发天数</p>
        <span class="time_span">1-7天</span>
        <span class="time_span">7-15天</span>
        <span class="time_span">15天以上</span>
     </div>

     <div class="plan_time">
        <p>出发人数</p>
        <div class="plan_people">
           <span>成人</span>
           <InputNumber :min='1' v-model="adult"></InputNumber>
           <span>儿童</span>
           <InputNumber :min='0' v-model="child"></InputNumber>
        </div>
     </div>

     <div class="plan_time">
        <p>出发地点</p>
        <p>北京</p>
     </div>

     <div class="plan_time">
        <p>人均预算</p>
        <span @click="change1()" :class="{ 'span_css': csstag1}"  class="time_span">10000元以下</span>
        <span :class="{ 'span_css': csstag2}" @click="change2()" class="time_span">10000元到30000元</span>
        <span :class="{ 'span_css': csstag3}" @click="change3()" class="time_span">30000元到50000元</span>
        <span :class="{ 'span_css': csstag4}" @click="change4()" class="time_span">5000元以上</span>

      <!-- <template>
         <RadioGroup v-model="button1" type="button">
            <Radio label="北京"></Radio>
            <Radio label="上海"></Radio>
            <Radio label="深圳"></Radio>
            <Radio label="杭州"></Radio>
        </RadioGroup>
       </template> -->
     </div>
     <div class="plan_time">
        <p>其他</p>
        <!-- <span class="time_span">机票</span>
        <span class="time_span">签证</span>
        <span class="time_span">接送机服务</span>
        <span class="time_span">车辆服务</span>
        <span class="time_span">当地导游</span>
        <span class="time_span">酒店星级与房型</span>
        <span class="time_span">指定景点</span>
        <span class="time_span">特色美食</span>
        <span class="time_span">购物</span> -->

        <div class="checks">
          <el-checkbox class="plan_ch" v-model="checked1" label="机票" border></el-checkbox>
          <el-checkbox class="plan_ch" v-model="checked2" label="签证" border></el-checkbox>
          <el-checkbox class="plan_ch" v-model="checked3" label="接送机服务" border></el-checkbox>
          <el-checkbox class="plan_ch" v-model="checked4" label="车辆服务" border></el-checkbox>
          <el-checkbox class="plan_ch" v-model="checked5" label="当地导游" border></el-checkbox>
          <el-checkbox v-model="checked6" label="酒店星级与房型" border></el-checkbox>
          <el-checkbox class="plan_ch" v-model="checked7" label="指定景点" border></el-checkbox>
          <el-checkbox class="plan_ch" v-model="checked8" label="购物" border></el-checkbox>
        </div>
     </div>

     <div class="choice_bottom">
        <span @click="changeurl()" class="choick_bottom_text">上一步</span>
        <span @click="changeurl2()" class="choick_bottom_text">下一步</span>
     </div>


  </div>
</template>

<script>
import Headbar from './head'
export default {
   data(){
      return{
         adult: 1,
         child: 0,
         choice: '1-7天',
         title: '凯撒旅游--个性定制服务',
         csstag1: false,
         csstag2: false,
         csstag3: false,
         csstag4: false,
         checked3:'',
         checked1:'',
         checked2:'',
         checked4:'',
         checked5:'',
         checked6:'',
         checked7:'',
         checked8:'',
         button1: '北京'
         // adulttag: false,
         // childtag: false
      }
   },
   components:{
      Headbar
   },
   watch:{
      // adult(){
      //    if(this.adult <= 0){
      //       this.$Message.warning('成年人最少为一人！');
      //    }
      // },
      // child(){
      //    if(this.child < 0){
      //       this.$Message.warning('人数不能为负！');
      //    }
      // }
   },
   methods:{
      changeurl(){
         this.$router.push({
            name: 'choice'
         })
      },
      changeurl2(){
         if(this.adult < 1 || this.child < 0){
            alert('请从选择正确的人数');
         }else{
            this.$router.push({
               name: 'order'
            })
         }

      },
      change1(){
         this.csstag1 = !this.csstag1;
      },
      change2(){
         this.csstag2 = !this.csstag2;
      },
      change3(){
         this.csstag3 = !this.csstag3;
      },
      change4(){
         this.csstag4 = !this.csstag4;
      }
   }
}
</script>

<style lang="css" scoped>
.aa{
   height:10rem;
}
.choice_top{
   width: 100%;
   height:6rem;
   background-color: #f9f9f9;
}
.choice_top img{
   width: 80%;
   height:50%;
   margin-top: 1.3rem;
}
.plan_time{
   width: 95%;
   height:6rem;
   margin:0 auto;
   padding: 0.5rem;
   border-bottom: 0.05rem solid #999;
   margin-bottom: 2rem;
}
.plan_time .plan_ch{
   width: 13rem;
}
/*.plan_time:nth-of-type(6){
   height: 10rem;
}*/
/*.plan_time:nth-of-type(6) span{
   width: 39%;
   margin-left: 2rem;
}*/
.plan_time:nth-of-type(7){
   height: 11rem;
}
.plan_time:nth-of-type(7) span{
   width: 39%;
   margin-left: 2rem;
}
.plan_time:nth-of-type(8){
   height: 20rem;
}
.plan_time:nth-of-type(8) span{
   width: 39%;
   margin-left: 2rem;
}
.plan_time p{
   text-align: left;
   font-size: 1.5rem;
   margin-bottom:0.5rem;
}
/*.plan_time_choice{
   margin-top: 0.5rem;
   border-radius: 0.8rem;
}*/
.plan_time .time_span{
   display: inline-block;
   width: 22%;
   height: 2.5rem;
   line-height: 2.5rem;
   font-size: 1.5rem;
   border:  0.1rem solid #999;
   border-radius: 0.7rem;
   color: #999;
   margin-bottom: 1rem;
   float: left;
   margin-right: 1rem;
}
.span_css{
   color: #fff;
   border:  0.1rem solid #00b0ec;
   background-color: #00b0ec;
}
/*.plan_time_price{
   width:14rem;
   margin-top:1rem;

}*/
.plan_people{
   text-align: left;
}
.plan_people span{
   font-size: 1.5rem;
   padding-right: 1rem;
}
.choick_bottom{
   margin-bottom: 2rem;
}
.choick_bottom_text{
   width: 90%;
   height: 4rem;
   display: inline-block;
   margin-bottom: 0.5rem;
   font-size: 2rem;
   line-height: 4rem;
}
.choick_bottom_text:nth-of-type(1){
   border: 0.1rem solid #00b0ec;
   border-radius: 0.6rem;
   color: #00b0ec;
}
.choick_bottom_text:nth-of-type(2){
   color: #fff;
   background-color: #00b0ec;
   border-radius: 0.6rem;
}
</style>
